<template>
    <div>
        <el-button-group>
            <el-button @click="clearSelection">清空选中</el-button>
            <el-button @click="toggleAllSelection">切换所有选中状态</el-button>
            <el-button @click="selectionView">选中的列表</el-button>
        </el-button-group>
        <VoSchemaTable ref="st" :data="data" :columns="columns" v-bind="table" @selection-change="selectChange">
            <template #empty>
                没有类容
            </template>
            <template #append>
                插入的类容
            </template>
            <!-- 此处的优先级高于 birthday.scopedSlots.default -->
            <template #birthday="scope">生日：{{scope.row.birthday}}</template>
            <!-- 此处的优先级高于 operation.buttons -->
            <!-- <template #operation="{ row }">
                <el-button type="primary" @click="shareClick({ row })">呵呵-{{row.name}}</el-button>
            </template> -->
        </VoSchemaTable>

        <el-dialog title="选中的列表" :visible.sync="visible">
            <VoSchemaTable ref="st" :data="selectionList" :columns="selectionColumns"></VoSchemaTable>
        </el-dialog>

        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/st.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            search: '',
            table: {
                border: true,
                stripe: true,
                size: 'mini',
                maxHeight: '600px',
                fit: true,
                showHeader: true,
                highlightCurrentRow: true,
                rowClassName: 'vo-row',
                rowKey: 'id',
                defaultExpandAll: false,
                defaultSort: {
                    prop: 'sex',
                    order: 'descending'
                },
                tooltipeffect: 'dark',
                showSummary: true,
                // spanMethod: this.spanMethod,
                emptyText: '啥都没有'
            },
            columns: [{
                label: 'ID',
                prop: 'id',
                width: 200,
                fixed: 'left'
            }, {
                type: 'selection',
                label: '选择',
                width: 80
            }, {
                type: 'index',
                label: '序号',
                width: 200,
                index(index) {
                    return index * 2
                }
            }, {
                label: '综合',
                width: 200,
                children: [
                    { prop: 'name', label: '名称', width: 100 },
                    {
                        prop: 'ah',
                        label: '爱好',
                        width: 100,
                        scopedSlots: {
                            default: ({ row }) => {
                                return <el-tag type={['篮球', '唱歌', '跳舞', 'rap'].indexOf(row.ah) !== -1 ? 'primary' : 'success'}>{row.ah}</el-tag>
                            }
                        }
                    }
                ]
            }, {
                prop: 'sex',
                label: '性别',
                width: 200,
                sortable: true,
                filters: [{ text: '男', value: '男' }, { text: '女', value: '女' }],
                filterMethod: this.filterHandler
            }, {
                prop: 'birthday',
                label: '出身日期',
                width: 200,
                scopedSlots: {
                    default: ({ row }) => {
                        const yearsOld = new Date().getFullYear() - new Date(row.birthday).getFullYear()
                        return <span><i class="el-icon-time"></i>{row.birthday}<br/>{`${yearsOld}岁`}</span>
                    },
                    header: (scope) => {
                        return <el-input vModel={this.search} size="mini" placeholder="输入关键字搜索" autocapitalize="off" vOn:change={this.searchChange}/>
                    }
                }
            }, {
                label: '爱好',
                prop: 'ah'
            }, {
                label: '身家',
                width: 200,
                prop: 'money',
                fixed: 'right',
                formatter(row, column, cellValue) {
                    return `￥${cellValue}`
                },
                renderHeader(h, { column, $index }) {
                    return <el-tag type="primary">身家</el-tag>
                }
            }, {
                label: '操作',
                width: 200,
                prop: 'operation',
                fixed: 'right',
                buttons: [
                    {
                        text: '编辑',
                        size: 'medium',
                        type: 'primary',
                        plain: true,
                        loading: true,
                        icon: 'el-icon-edit',
                        directives: [
                            { name: 'permissions', value: 'user' }
                        ]
                    }, {
                        text: '删除',
                        size: 'mini',
                        type: 'danger',
                        round: true,
                        disabled: true,
                        icon: 'el-icon-delete',
                        directives: [
                            { name: 'permissions', value: 'admin' }
                        ]
                    }, {
                        text: '分享',
                        size: 'small',
                        type: 'text',
                        circle: true,
                        icon: 'el-icon-share',
                        on: {
                            click: this.shareClick
                        },
                        if({ row }) {
                            return row.id === '8'
                        }
                    }
                ]
            }],
            data: [
                {
                    id: '1',
                    name: '小明',
                    sex: '男',
                    ah: '篮球',
                    birthday: '1994-05-09',
                    money: 25000,
                    children: [
                        { id: '1-1', name: '手机', sex: '男', ah: '打字', birthday: '1998-05-09', money: 10000 },
                        {
                            id: '1-2',
                            name: '水杯',
                            sex: '男',
                            ah: '喝水',
                            birthday: '1998-05-09',
                            money: 15000,
                            children: [
                                { id: '1-2-1', name: '铁杯子', sex: '无性', ah: '装水', birthday: '2005-05-09', money: 30 },
                                { id: '1-2-2', name: '玻璃杯子', sex: '无性', ah: '装水', birthday: '2005-05-09', money: 30 }
                            ]
                        }
                    ]
                },
                { id: '2', name: '小红', sex: '女', ah: '唱歌', birthday: '1998-05-09', money: 1000 },
                { id: '3', name: '小张', sex: '女', ah: '跳舞', birthday: '1998-05-09', money: 3000 },
                { id: '4', name: '小花', sex: '男', ah: 'rap', birthday: '1998-05-09', money: 13524.14 },
                { id: '5', name: '小熊', sex: '女', ah: '吃饭', birthday: '1998-05-09', money: 33.33 },
                { id: '6', name: '小时', sex: '男', ah: '睡觉', birthday: '1998-05-09', money: 5555 },
                { id: '7', name: '小了', sex: '女', ah: '打豆豆', birthday: '1998-05-09', money: 150000 },
                { id: '8', name: '小管', sex: '男', ah: '女', birthday: '1998-05-09', money: 5000000 },
                { id: '9', name: '小哥', sex: '女', ah: '男', birthday: '1998-05-09', money: 15000 },
                { id: '10', name: '小谢', sex: '男', ah: '上面的', birthday: '1998-05-09', money: 480000000 },
                { id: '11', name: '小鱼', sex: '男', ah: '下面的', birthday: '1998-05-09', money: 480000000 },
                { id: '12', name: '小欢', sex: '男', ah: '我不说', birthday: '1998-05-09', money: 480000000 },
                { id: '13', name: '小艾', sex: '女', ah: '我没有', birthday: '1998-05-09', money: 480000000 },
                { id: '14', name: '小编', sex: '男', ah: '我不是', birthday: '1998-05-09', money: 480000000 },
                { id: '15', name: '小何', sex: '女', ah: '你猜', birthday: '1998-05-09', money: 480000000 }
            ],
            selection: [],
            selectionList: [],
            selectionColumns: [
                { label: 'ID', prop: 'id' },
                { prop: 'name', label: '名称' },
                { prop: 'ah', label: '爱好' },
                { prop: 'sex', label: '性别' },
                { prop: 'birthday', label: '出身日期' },
                { prop: 'money', label: '身家' },
                { prop: 'ah', label: '爱好' }
            ],
            visible: false
        }
    },
    methods: {
        filterHandler(value, row, column) {
            const property = column.property;
            return row[property] === value;
        },
        searchChange(value) {
        },
        spanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        clearSelection() {
            this.$refs.st.clearSelection()
        },
        toggleAllSelection() {
            this.$refs.st.toggleAllSelection()
        },
        selectChange(el) {
            console.log(el);
            this.selection = el;
        },
        selectionView() {
            this.selectionList = this.selection.map(e => Object.assign({}, e))
            this.visible = true;
        },
        shareClick({ row }) {
            console.log(row);
            this.$message.info(row.id + '-' + row.name)
        }
    }
}
</script>

<style>

</style>
